<template>
  <el-dialog
    v-model="visible"
    :close-on-click-modal="false"
    title="选择人群"
    append-to-body
    width="50%"
    top="50px"
    class="dialogOperate"
  >
    <div class="formSearch">
      <el-form :inline="true" :model="query">
        <el-form-item label="人群名称">
          <el-input
            v-model="query.crowdName"
            maxlength="20"
            placeholder="请输入人群名称"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain @click="handleSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格 -->
    <div class="tableBox">
      <el-table
        ref="operateTable"
        :data="tableData"
        border
        :header-cell-style="{ background: '#EEF3FF', color: '#333333' }"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column label="选择" width="55" align="center">
          <template #default="scope">
            <el-radio
              v-model="selectedRow.id"
              :label="scope.row.shopCrowdId"
              @change.native="getCurrentRow(scope.row)"
            >
              &nbsp;
            </el-radio>
          </template>
        </el-table-column>
        <el-table-column
          prop="crowdName"
          label="人群名称"
          width="220"
          align="center"
        />
        <el-table-column
          prop="content"
          label="人群定义"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="users"
          label="人群人数"
          align="center"
          show-overflow-tooltip
        />
      </el-table>
      <div class="fenye">
        <el-pagination
          :current-page="page.page"
          :page-sizes="[5, 20, 50, 100]"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
          style="justify-content: flex-end;"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <template #footer>
      <el-button type="primary" @click="handleSelected">确 定</el-button>
      <el-button @click="handleClose">取 消</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, ref, shallowRef } from 'vue';
import {
  selectCrowdData,
} from '@/api/customer'

const emits = defineEmits(['selected']);
let visible = shallowRef(false);
let tableData = ref([]);
let selectedRow = reactive({
  id: null,
  name: '',
});

let page = reactive({
  page: 1,
  pageSize: 10,
  total: 0
})
let query = reactive({
  crowdName: '', // 人群名称
})

function show () {
  visible.value = true
  getGroupData()
}

function handleClose () {
  visible.value = false
}

function getGroupData () {
  selectCrowdData({
    page: page.page,
    pageSize: page.pageSize,
    ...query
  }).then(res => {
    tableData.value = res.data && res.data.list || []
    page.total = res.data.total
  }).catch(err => {
    console.log(err)
  })
}
function handleCurrentChange (val) {
  page.page = val
  getGroupData()
}

function handleSizeChange (val) {
  page.page = 1
  page.pageSize = val
  getGroupData();
}

function handleSearch () {
  getGroupData();
}

function getCurrentRow (row) {
  selectedRow.name = row.crowdName
  selectedRow.id = row.shopCrowdId
}

function handleSelected () {
  emits('selected', selectedRow)
  handleClose();
}

defineExpose({
  show,
  handleClose,
})
</script>

<style lang="scss" scoped>
.el-radio {
  // 隐藏单选框的绑定值
  :deep(.el-radio__label) {
    display: none;
  }
}
</style>